import React from 'react';
import { Space } from 'antd'


const MyModal = ({ open, onCancel, zIndex, children }) => {
    return (
        <>
            {open && (
                <div style={{ position: "fixed", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "rgba(0, 0, 0, 0.5)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: zIndex || 1000 }}>
                    <div style={{backgroundColor: "white",padding: "20px",borderRadius: "8px",boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",position: "relative",width: "1000px",maxHeight:'90vh',overflowY:"auto"}}>
                        <Space direction="vertical" style={{ width: '100%', marginTop: 40 }}>
                            {children}
                            <span className="close-button" onClick={onCancel}>&times;</span>
                        </Space>
                    </div>
                </div>
            )}

        </>
    )
}

export default MyModal;